<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Configuration Guide</title>
    <link href="/dc/css/bootstrap.min.css" rel="stylesheet">
	<style>
	    .command-intro {
	        background-color: #f8f9fa;
	        padding: 20px;
	        border-radius: 8px;
	        margin-bottom: 30px;
	        border-left: 4px solid #007bff;
	    }
	    .command-intro h5 {
	        margin-bottom: 15px;
	    }
	    .badge-required {
	        background-color: #dc3545;
	    }
	    .badge-optional {
	        background-color: #28a745;
	    }
	</style>
</head>
<body>

<div class="container my-5">
    <div class="text-center mb-4">
		<h1>Help - Configure Device</h1>
		<p class="text-muted">Data Flow: Web Page Configuration → Cloud Server → Device → Cloud Server</p>
    </div>
	<div class="command-intro">
	    <h5>Configuration Mechanism Explanation</h5>
	    <p>Interaction between the cloud server and devices:</p>
	    <ul>
	        <li><strong>Through Web Page Configuration:</strong> Configuration content is first stored on the cloud server and can modify multiple configuration items.</li>
	        <li><strong>Modify config_version:</strong> Modify the config_version on the web page to any value different from that on the device. Different values indicate that the information should be marked for pushing.</li>
	        <li><strong>Next time the device reports data:</strong> When the cloud detects that config_version has been modified, it filters all modified configuration items, packages them, and sends the package as part of the response message back to the device. This means that the modification will only be sent back with the response when the device reports data. If the device does not report data, the information will temporarily remain on the cloud.</li>
	        <li><strong>Device Receives Configuration:</strong> After receiving the configuration information, the device checks it, skips identical or erroneous content, and if there are still valid modifications, stores them in the local flash. The device then immediately reports the latest configuration information back to the cloud.</li>
			<li><strong>Cloud Receives Latest Configuration:</strong> After receiving the latest configuration information, the cloud updates the device list content on the configuration page.</li>
	    </ul>
	</div>
    <div class="accordion" id="configAccordion">
    </div>
</div>
<script src="/dc/js/bootstrap.bundle.min.js"></script>
<th:block th:insert="~{fragments/nav :: scriptFunctions}"></th:block>
<script th:inline="javascript">
    window.onload = function () {
        (async () => {
            const result = await (await makeRequest('GET','/dc/pub/doc/configlist', null, false)).json();
            if (result.configList && Array.isArray(result.configList)) {
                result.configList.forEach(config => {
                    createAccordionItem(config.id, config.order, config.moduleName);
                });
            }	
        })();
    };
	function createAccordionItem(id,order,name) {
	     const accordion = document.getElementById('configAccordion');
	     const accordionItem = document.createElement('div');
	     accordionItem.className = 'accordion-item';
	     accordionItem.id = `item${id}`;

	     const headerHtml = `
	         <h2 class="accordion-header" id="heading${id}">
	             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
	                 data-bs-target="#collapse${id}" aria-expanded="false" aria-controls="collapse${id}" 
	                 onclick="loadAccordionContent('${id}', '${name}')">
	                 <span class="me-2 badge bg-primary">${order}</span> ${name}
	             </button>
	         </h2>
	     `;
	     
	     const contentHtml = `
	         <div id="collapse${id}" class="accordion-collapse collapse" aria-labelledby="heading${id}" data-bs-parent="#configAccordion">
	             <div class="accordion-body">Loading...</div>
	         </div>
	     `;

	     accordionItem.innerHTML = headerHtml + contentHtml;
	     accordion.appendChild(accordionItem);
	 }

	 function loadAccordionContent(id,name) {
	     const accordionBody = document.querySelector(`#collapse${id} .accordion-body`);
	     if (accordionBody.dataset.loaded === 'true') return;
	     const name2=name.split('_')[1].toLowerCase();
	     const url = '/dc/pub/doc?page=config_'+name2+'&deviceType=dc01';
	     fetch(url)
	         .then((response) => response.ok ? response.json() : Promise.reject('Failed to load content'))
	         .then((content) => {
	             fillAccordionItem(content.moduleName,content.moduleComments,content.configInfo, accordionBody)
	             accordionBody.dataset.loaded = 'true';
	         })
	         .catch(() => {
	             accordionBody.innerHTML = 'Error loading content.';
	         });
	 }
	 
	 function fillAccordionItem(moduleName,moduleComments,configInfo, bodyDiv) {
			bodyDiv.innerHTML='';
		    // Create module card container
		    const moduleCard = document.createElement("div");
		    moduleCard.className = "module-card";

		    // Create module title
		    const moduleTitle = document.createElement("h4");
		    moduleTitle.innerHTML = 'Module Name: <strong>'+moduleName+'</strong>';
		    moduleCard.appendChild(moduleTitle);

		    // Module description
		    const moduleDescription = document.createElement("p");
		    moduleDescription.textContent = moduleComments;
		    moduleCard.appendChild(moduleDescription);

		    // Create table
		    const table = document.createElement("table");
		    table.className = "table config-table";

		    // Create table header
		    const thead = document.createElement("thead");
		    thead.innerHTML = `
		        <tr>
		            <th>Configuration Item</th>
		            <th>Example</th>
		            <th>Range</th>
		            <th>Description</th>
		        </tr>
		    `;
		    table.appendChild(thead);

		    // Create table content
		    const tbody = document.createElement("tbody");
		    configInfo.forEach((config) => {
		        const row = document.createElement("tr");

		        // Configuration item column
		        const nameCell = document.createElement("td");
		        nameCell.textContent = config.name;
		        row.appendChild(nameCell);

		        // Example value column
		        const sampleCell = document.createElement("td");
		        sampleCell.textContent = config.sample;
		        row.appendChild(sampleCell);

		        // Range column
		        const rangeCell = document.createElement("td");
		        rangeCell.textContent = config.range;
		        row.appendChild(rangeCell);

		        // Description column
		        const commentsCell = document.createElement("td");
		        commentsCell.textContent = config.comments;
		        row.appendChild(commentsCell);

		        tbody.appendChild(row);
		    });

		    table.appendChild(tbody);
		    moduleCard.appendChild(table);

		    // Insert the module card into the specified container
		    bodyDiv.appendChild(moduleCard);
		}
    function createAccordionItem2(id, name, order) {
        const itemDiv = document.createElement('div');
        itemDiv.classList.add('accordion-item');
        const header = document.createElement('h2');
        header.classList.add('accordion-header');
        header.id = `${id}Header`;
        const button = document.createElement('button');
        button.classList.add('accordion-button', 'collapsed');
        button.type = 'button';
        button.setAttribute('data-bs-toggle', 'collapse');
        button.setAttribute('data-bs-target', `#${id}`);
        button.setAttribute('aria-expanded', 'false');
        button.setAttribute('aria-controls', id);
        button.innerText = `${order}: ${name}`;
        button.onclick = function () {
            (async () => {
                const result = await (await makeRequest('GET', `/dc/pub/doc/configinfo?id=${id}`, null, false)).json();
                if (result.configInfo) fillAccordionItem(result.moduleName,result.moduleComments,result.configInfo, bodyDiv);
            })();
        };
        const collapseDiv = document.createElement('div');
        collapseDiv.classList.add('accordion-collapse', 'collapse');
        collapseDiv.id = id;
        collapseDiv.setAttribute('aria-labelledby', `${id}Header`);
        collapseDiv.setAttribute('data-bs-parent', '#configAccordion');
        const bodyDiv = document.createElement('div');
        bodyDiv.classList.add('accordion-body');
        collapseDiv.appendChild(bodyDiv);
        header.appendChild(button);
        itemDiv.appendChild(header);
        itemDiv.appendChild(collapseDiv);
        document.getElementById('configAccordion').appendChild(itemDiv);
    }

	

    </script>
</body>
</html>